<template>
  <el-upload
    drag
    :action="uploadImageAction"
    multiple
    :headers="{
      Authorization: token,
    }"
    name="image"
    :data="data"
    :on-success="uploadSuccess"
    :on-error="uploadError"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">将文件拖到此处或<em>单击上传</em></div>
    <template #tip>
      <div class="el-upload__tip">mp4格式的视频文件</div>
    </template>
  </el-upload>
</template>
<script setup>
import { uploadImageAction } from "~/api/medias/image";
import { getToken } from "~/composables/auth";
import { toast } from "~/composables/util";
const token = "Bearer " + getToken();

defineProps({
  data: Object,
});

const emit = defineEmits(["success"]);

const uploadSuccess = (response, uploadFile, uploadFiles) => {
  emit("success", {
    response,
    uploadFile,
    uploadFiles,
  });
};

const uploadError = (error, uploadFile, uploadFiles) => {
  let message = JSON.parse(error.message);
  let offset = 0;
  for (var obj in message) {
    let msg = "";
    for (var num in message[obj]) {
      msg += message[obj][num];
    }
    toast(msg || "上传失败！", "error", offset);
    offset += 100;
  }
};
</script>